import { Loader, Tabs, Container } from '@mantine/core';
import { IconUserQuestion } from '@tabler/icons-preact';
import { useQuery } from 'react-query';
import { useLocation, useNavigate } from "react-router-dom";
import { GetMeAsync } from '../../api/UserService';
import Logo from '../Logo/Logo';
import PrivateMenu from '../PrivateMenu/PrivateMenu';
import classes from './Header.module.css'

const mainMenu = {
	Users: "Сотрудники",
	URV: "УРВ",
	About: "О компании"
};

export default function Header() {

	const location = useLocation();
	const navigate = useNavigate();
	const { data, isError, isLoading } = useQuery("getMe", GetMeAsync, { refetchOnWindowFocus: false, retry: 1 });

	return (
		<Container className={classes.header}>
			{isLoading
				? <Loader color='red' size="xs" />
				: isError
					? <IconUserQuestion size={16} />
					: <PrivateMenu person={data} />}

			<Logo size={50} url='/' />

			<Tabs variant="pills"
				value={location.pathname}
				onChange={value => navigate(`${value}`)}
			>
				<Tabs.List>
					<Tabs.Tab value="/users">{mainMenu.Users}</Tabs.Tab>
					<Tabs.Tab value="/urv">{mainMenu.URV}</Tabs.Tab>
					<Tabs.Tab value="/about">{mainMenu.About}</Tabs.Tab>
				</Tabs.List>
			</Tabs>
		</Container>
	);
}
